<template>
	<div class="match-up">
		<el-button type="primary" @click="linkTo" :disabled="disable">Match Up</el-button>
	</div>
</template>

<script>
	export default {
		name: 'match-up',
		data () {
			return {
				disable: !this.matchUpUrl
			};
		},
		props: ['matchUpId', 'matchUpTitle', 'matchUpUrl', 'blueSide', 'RedSide'],
		methods: {
			linkTo: function() {
				if (this.matchUpUrl) {
					window.open(this.matchUpUrl);
				}
			}
		}
	}
</script>

<style>
	.match-up {
		text-align: center;
	}
</style>